<style>
    /* 公告容器 */
    .notice-container {
        margin: 15px 0;
        padding: 12px 16px;
        background: rgba(255, 244, 229, 0.9);
        border-left: 4px solid #ff9800;
        border-radius: 4px;
        box-shadow: 0 2px 8px rgba(255, 152, 0, 0.1);
        animation: slideIn 0.5s ease-out;
    }

    @keyframes slideIn {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* 公告标题 */
    .notice-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #e65100;
        font-size: 15px;
        font-weight: 500;
        margin-bottom: 8px;
        cursor: pointer;
        user-select: none;
    }

    .notice-title-left {
        display: flex;
        align-items: center;
    }

    .notice-title i {
        margin-right: 8px;
        font-size: 18px;
    }

    .notice-toggle {
        font-size: 14px;
        color: #ff9800;
        transition: transform 0.3s;
    }

    .notice-toggle.collapsed {
        transform: rotate(-180deg);
    }

    /* 公告内容 */
    .notice-content {
        color: #795548;
        font-size: 13px;
        line-height: 1.6;
        max-height: 500px;
        overflow: hidden;
        transition: max-height 0.3s ease-out;
    }

    .notice-content.collapsed {
        max-height: 0;
    }

    .notice-content p {
        margin: 4px 0;
    }

    .notice-tips {
        margin-top: 8px;
        padding-top: 8px;
        border-top: 1px dashed rgba(121, 85, 72, 0.2);
        font-size: 12px;
        color: #8d6e63;
    }

    /* 移动端适配 */
    @media screen and (max-width: 767px) {
        .notice-container {
            margin: 10px 0;
            padding: 10px 12px;
        }

        .notice-title {
            font-size: 14px;
        }

        .notice-content {
            font-size: 12px;
        }
    }
</style>

<div class="notice-container">
    <div class="notice-title" onclick="toggleNotice()">
        <div class="notice-title-left">
            <i class="layui-icon layui-icon-about"></i>
            线路加载提示
        </div>
        <i class="layui-icon layui-icon-up notice-toggle"></i>
    </div>
    <div class="notice-content">
        <p>亲爱的用户，由于当前线路的数据来源于第三方服务器，加载速度可能会受到以下因素影响：</p>
        <p>• 对方服务器的响应速度</p>
        <p>• 网络连接质量</p>
        <div class="notice-tips">
            温馨提示：如遇加载缓慢，建议<br>
            - 稍候片刻或刷新页面重试<br>
            - 使用其他线路
        </div>
    </div>
</div>

<script>
    // 初始状态：展开
    let isNoticeCollapsed = false;
    
    function toggleNotice() {
        const content = document.querySelector('.notice-content');
        const toggle = document.querySelector('.notice-toggle');
        
        isNoticeCollapsed = !isNoticeCollapsed;
        
        if (isNoticeCollapsed) {
            content.classList.add('collapsed');
            toggle.classList.add('collapsed');
        } else {
            content.classList.remove('collapsed');
            toggle.classList.remove('collapsed');
        }

        // 使用 layer 显示提示
        layer.msg(isNoticeCollapsed ? '已收起提示' : '已展开提示', {
            offset: 't',
            time: 1000
        });
    }

    // 从 localStorage 恢复状态
    document.addEventListener('DOMContentLoaded', function() {
        const savedState = localStorage.getItem('noticeCollapsed');
        if (savedState === 'true') {
            toggleNotice();
        }
    });

    // 保存状态到 localStorage
    window.addEventListener('beforeunload', function() {
        localStorage.setItem('noticeCollapsed', isNoticeCollapsed);
    });
</script>
